<template>
<div>
  <span class="text-article" v-if="uid === '0'" >全部</span>
  <span class="text-article" v-else>{{ type }}</span>
  <div>
    <ul style="list-style-type: none;margin: 0;padding: 0;" v-for="(article,index) in articles">
      <li style="margin-top: 20px;" @click="toArticle(article.id)" >
        <span style="float: left">{{article.name}}</span>
        <span>&nbsp;</span>
        <span style="float: right">{{article.createTime | DateFormat}}</span>
        <span style="float: right;margin-right: 20%">&nbsp;{{clubNames[index].name}}</span>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
import {articleListApi,articleTypeListApi,clubListApi} from '@/api'
export default {
  name: "ArticleC",
  data(){
    return {
      uid: 0,
      articles:[],
      articleTypes:[],
      type:'',
      clubs:[],
      clubNames: [],
    }
  },

  created() {
      this.uid = this.$route.query.uid;
    articleTypeListApi().then((result)=>{
        this.articleTypes = result.data;
        this.articleTypes.unshift({id:0,name:''});
        this.type = this.articleTypes[this.uid].name;
        let article = {
            type: this.articleTypes[this.uid].name,
          status:2,
        };
        articleListApi(article).then((result)=>{
          this.articles = result.data.list;

          clubListApi().then((result)=>{
              this.articles.forEach((item)=>{
                result.data.list.forEach((item1)=>{
                  if (item.c_id === item1.id){
                    this.clubNames.push({name:item1.name});
                  }
                })
              })
          });
        });
      });
  },

  methods: {
    toArticle(id) {
      this.$router.push({
        path: '/articleA/articleB',
        query: {
          id: id,
        }
      });
    }
  }
}
</script>

<style scoped>
.text-article{
  font-size: 1.5em;
  margin-left: -85%;
}
</style>
